<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/fanxiang.css">
	<title>凡响计划</title>
	<link rel="icon" href="./img/favicon.ico">
</head>
<body>
	<!-- f1 -->
	<div class="f1">
		<div class="container">
			<div class="row">
				<div class="col-3">
					<img src="./img/logo.e9da51f.png" >
					<span>|</span>
					<p>凡响计划</p>
				</div>
				<div class="col-9">
					<ul>
						<li><a href="#">首页</a>
						<span></span>
						</li>
						<li><a href="#">专辑</a>
						<span></span>
						</li>
						<li><a href="#">音乐人</a>
						<span></span>
						</li>
						<li><a href="#">原创厂牌</a>
						<span></span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- f2 -->
	<div class="f2">
		<div class="container">
			<div class="slideshow">
			<img src="./img/fanxiang1.jpg" id="carousel">
			<img src="img/left2.png" id="left" >
			<img src="img/向右2.png" id="right">
			<ul>
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			</div>
		</div>
	</div>
	<!-- f3 -->
	<div class="f3">
		<div class="container">
			<img src="./img/191107104521294_680x160_4982.png">
			<img src="./img/20033115442159_680x160_2594.png">
		</div>
	</div>
	<!-- f4 -->
	<div class="f4">
		<div class="container">
			<p>歌单推荐</p>
			<div class="row">
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMd3ebab686f152f7322844fca3bece24d.jpg" >
						</div>
						<p>摇滚赚大钱（Money Tr..</p>
						<p>白纸扇阿卜杜G</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMf704e0e8c197e74f1b122ad7742ea642.jpg" >
						</div>
						<p>你要去哪</p>
						<p>虚幻</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AM44e058031c89521ff7ab0d1d2ed94b22.jpg" >
						</div>
						<p>我想带你去重庆</p>
						<p>钟婉芸</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMaf9122264f297dab8f985f963315fad8.jpg" >
						</div>
						<p>及时行乐</p>
						<p>洪嘉豪</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMd8e6051a140e0ddc0a6d6be5b60e5569.jpg" >
						</div>
						<p>不要淋雨</p>
						<p>吴容玮</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AM6191744a283892dc0f690af34a6030bd.jpg" >
						</div>
						<p>Across The Water</p>
						<p>游士衢</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMc76f68004b180867b5aebeb92721822b.jpg" >
						</div>
						<p>Creamy Boy feat. JNYBe</p>
						<p>JNYBeatzDelta T 蛋挞头</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="img/AM0ce23eb278fc36df2b2b62d50e00eb27.jpg" >
						</div>
						<p>白色教堂</p>
						<p>StellaVee</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMee49bf51d2f80779e6ad0b1253a40913.jpg" >
						</div>
						<p>啪哩啪哩</p>
						<p>玖壹壹</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AM25754d2887435d33591353ad05f43ecc.jpg" >
						</div>
						<p>南门路上（Live Session）</p>
						<p>薛诒丹</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMbd26405fd2077b98257ba77d80835055.jpg" >
						</div>
						<p>祈祷</p>
						<p>弱手</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="img-box">
							<img src="./img/AMd6fdacdaea5fecc4033bb04b614ac6d3.jpg" >
						</div>
						<p>黑骏马</p>
						<p>苍耳乐队</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f5 -->
	<div class="f5">
		<div class="container">
			<p>专辑推荐</p>
			<div class="row">
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/AS63d6ba8a3316f66e97f0b360832055a3.jpg" >
						<span>2022-01-21</span>
						</div>
						</div>
						<p>周密计划</p>
						<p>CJ 周密</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/ASf349e7844ca81ec23fcab231096b7164.jpg" >
						<span>2022-01-20</span>
						</div>
						</div>
						<p>CLOCKWORK发条1.0</p>
						<p>周凯翔仰昭光SOOVACLOCKW</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/AS1959885b44553e20043bc2c2810589b7.jpg" >
						<span>2022-01-20</span>
						</div>
						</div>
						<p>献拙</p>
						<p>刘濮绫</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/AS778aa698282b48487a0e05b38fcdea5a.jpg" >
						<span>2022-01-11</span>
						</div>
						</div>
						<p>多肉学</p>
						<p>多多肉</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/AS21131de0354daa18b64b70a9292388bf.jpg" >
						<span>2022-01-11</span>
						</div>
						</div>
						<p>20世纪的幻想</p>
						<p>白皮书乐队</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/AS4e19741c05d7a38b1c9219e8c5f6a365.jpg" >
						<span>2022-01-07</span>
						</div>
						</div>
						<p>每到夜里我就很饿</p>
						<p>ChiliChill</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/AS56b1c84ce7ce6c6f36fea31ac51d7ef8.jpg" >
						<span>2022-01-07</span>
						</div>
						</div>
						<p>重庆迷雾</p>
						<p>Fantasy Girl 1985</p>
					</div>
				</div>
				<div class="col-3">
					<div class="box">
						<div class="img-box">
							<div class="play">
								<img src="img/8e09ec01529ead4b.png" >
							</div>
							<div class="cover-img">
						<img src="./img/ASfac1e7e4ec2d548350166c1c00d6e50c.jpg" >
						<span>2022-01-07</span>
						</div>
						</div>
						<p>Take It Slow</p>
						<p>Crispy脆乐团恐龙的皮 The Dino</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f6 -->
	<div class="f6">
		<div class="container">
			<p>音乐人</p>
			<div class="row">
				<div class="col-2">
					<div class="img-box">
						<img src="img/200622175343688_none_7747.jpg" >
					</div>
						<p>田燚</p>
				</div>
				<div class="col-2">
					<div class="img-box">
						<img src="./img/190906175749785_none_4023.jpg" >
					</div>
						<p>孟子坤</p>
				</div>
				<div class="col-2">
					<div class="img-box">
						<img src="./img/211216133202546_none_1627.jpg" >
					</div>
						<p>陈意涵Estelle</p>
				</div>
				<div class="col-2">
					<div class="img-box">
						<img src="./img/200222151248681_none_8046.jpg" >
					</div>
						<p>马伯骞</p>
				</div>
				<div class="col-2">
					<div class="img-box">
						<img src="./img/201105090721324_none_4449.jpg" >
					</div>
						<p>傻子与白痴</p>
				</div>
				<div class="col-2">
					<div class="img-box">
						<img src="./img/200928145536477_none_1359.jpg" >
					</div>
						<p>黄明昊 (Justin)</p>
				</div>
			</div>
		</div>
	</div>
	<!-- f7 -->
	<div class="f7">
		<div class="container">
			<p>原创厂牌</p>
			<div class="cont">
				<div class="row">
					<div class="col">
						<div class="img-box">
						<img src="./img/190808175948183_184x184_3959.png" >
						</div>
						<p>华纳唱片</p>
					</div>
					<div class="col">
						<div class="img-box">
						<img src="./img/190829233406564_column_6991.png" >
						</div>
						<p>索尼音乐</p>
					</div>
					<div class="col">
						<div class="img-box">
						<img src="img/190916160940231_184x184_3865.jpg" >
						</div>
						<p>环球唱片</p>
					</div>
					<div class="col">
						<div class="img-box">
						<img src="img/190829233456848_column_3772.jpg" >
						</div>
						<p>相信音乐</p>
					</div>
					<div class="col">
						<div class="img-box">
						<img src="img/190829233407701_column_3598.jpg" >
						</div>
						<p>太合麦田</p>
					</div>
					<div class="col">
						<div class="img-box">
						<img src="img/190829233419450_column_4789.jpg" >
						</div>
						<p>摩登天空</p>
					</div>
					<div class="col">
						<div class="img-box">
						<img src="img/190829233504731_column_4432.jpg" >
						</div>
						<p>种子音乐</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f8 -->
	<div class="f8">
	<div class="container-fluid">
		<div class="container">
			<div class="row">
				<div class="col-6">
					<p>咪咕音乐家族</p>
					<ul>
						<li><a href="#">圈子彩铃</a></li>
						<li><a href="#">个性彩铃</a></li>
					</ul>
					<p>联系我们</p>
					<ul>
						<li><a href="#">业务合作</a></li>
						<li><a href="#">常见问题</a></li>
						<li><a href="#">咪咕音乐人合作</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<div class="col-3">
					<p>关注我们</p>
					<div class="img">
					<img src="img/新浪微博.png">
						<img class="wx" src="./img/微信.png">
						<img class="khd" src="img/migu_gzh.png">
					</div>
				</div>
				<div class="col-3">
					<p class="h4">咪咕客户端</p>
					<div class="row">
						<div class="col">
							<img src="img/20101209435723_300x300_1190.png" >
							<p>咪咕音乐</p>
						</div>
						<div class="col">
							<img src="img/201012094413724_300x300_8080.png" >
							<p>咪咕视频</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="footer">
			<div class="container">
			<ul>
				<li>咪咕文化</li>
				<li>|</li>
				<li>咪咕音乐简介</li>
				<li>|</li>
				<li>版权声明</li>
				<li>|</li>
				<li>服务协议</li>
				<li>|</li>
				<li>隐私权政策</li>
			</ul>
			<ul>
				<li>蜀ICP备15012512号</li>
				<li>川网文（2019）2118-124号 </li>
				<li>网络视听许可证0112648号</li>
				<li>增值业务许可证A2.B1.B2-20100001</li>
			</ul>
			<p>Copyright © 2005 - 2022 咪咕音乐有限公司</p>
		</div>
		</div>
	</div>
	<script src="jquery-3.6.0.js"></script>
	<script>
	var i=1
	let l=0
	timer=setInterval(()=>{
		i++
		l++
		if(i>6){
			i=1
		}
		if(l>=6){
			l=0
		}
		$('.f2 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
		carousel.src=`./img/fanxiang${i}.jpg`
	},5000)
	left.onclick=()=>{
		i--
		l--
		if(i<=0){
			i=6
		}
		if(l<0){
			l=5
		}
		$('.f2 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
		carousel.src=`./img/fanxiang${i}.jpg`
	}
	right.onclick=()=>{
		i++
		l++
		if(i>6){
			i=1
		}
		if(l>5){
			l=0
		}
		$('.f2 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
		carousel.src=`./img/fanxiang${i}.jpg`
	}
	$('.f2 ul').on('mouseover','li',function(){
		$(this).prop('class','cur')
		$(this).siblings().prop('class','')
		const index=$(this).index()*1
		carousel.src=`./img/fanxiang${index+1}.jpg`
	})
	</script>
</body>
</html>
